<template>
  <el-form :inline="true">
    <el-form-item label="关键字">
      <el-input v-model="searchParams.keyWord" />
    </el-form-item>
    <el-form-item label="状态">
      <el-select v-model="searchParams.status" placeholder="状态">
        <el-option label="全部" :value="2" />
        <el-option label="显示" :value="0" />
        <el-option label="隐藏" :value="1" />
      </el-select>
    </el-form-item>
    <el-form-item label="创建时间">
      <el-date-picker
        v-model="dataRange"
        type="daterange"
        range-separator="至"
        value-format="YYYY-MM-DD"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
    </el-form-item>
    <el-form-item>
      <el-button @click="onSearch">搜索</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      dataRange: [],
      searchParams: {
        keyWord: "",
        status: 2, // 0 显示 1 隐藏 2 全部
        startTime: "",
        endTime: "",
      },
    };
  },
  watch: {
    dataRange: {
      handler(val) {
        this.searchParams.startTime = val[0];
        this.searchParams.endTime = val[1];
      },
      deep: true,
    },
  },
  methods: {
    onSearch() {
      // 告诉父组件 将处理数据携带
      this.$emit("onSearch", this.searchParams);
    },
  },
};
</script>

<style lang="scss" scoped></style>
